<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/logo.png" alt="" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSerchPageFn"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- tab栏导航 -->
    <div class="main">
      <van-tabs v-model="active" animated sticky offset-top="1.226667rem" @change="channelChangeFn">
        <van-tab v-for="item in userChannelList" :key="item.id" :title="item.name" :name="item.id">
          <ArticleList :channelId="active"></ArticleList>
        </van-tab>
      </van-tabs>

      <!-- 编辑频道图标 -->
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn" />
    </div>

    <!-- 频道管理弹出层 -->
    <van-popup v-model="show" get-container="body" class="channel_popup">
      <ChannelEdit :userList="userChannelList" :unCheckList="unCheckChannelList" @addChannelEv="addChannelFn" @removeChannelEv="removeChannelFn" @closeEv="plusClickFn" v-model="active"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChanneksAPI, removeChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'

export default {
  name: 'home',
  data () {
    return {
      active: 0, // 默认激活频道索引，默认是推荐
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 全部的频道
      // articleList: [] // 文章列表
      show: false, // 弹出层的显示与隐藏
      channelScrollObj: {}// 保存每个频道的滚动位置
    }
  },
  async created () {
    // 频道列表
    const { data: res } = await getUserChannelsAPI()
    this.userChannelList = res.data.channels
    // 首次展示获取推荐文章列表
    // this.channelChangeFn()

    // 获取所有频道
    const { data: res2 } = await getAllChannelsAPI()
    this.allChannelList = res2.data.channels
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    // tab切换事件 -> 获取文章列表数据、
    channelChangeFn () {
      // 文章列表
      // const { data: res2 } = await getArticleListAPI({
      //   channelId: this.active,
      //   timestamp: (new Date()).getTime()
      // })
      // this.articleList = res2.data.results
      // tab切换后设置滚动条的位置,这个组件内部会把切走的容器height设置为0，滚动条没有高度所以回到了顶部
      // 切回来的一瞬间，没有高度，滚动条事件从地下上来也被触发了所以数据设置为0
      // 切换的一瞬间高度为0，设置了位置也无用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollObj[this.active]
      })
    },
    // +号点击方法
    plusClickFn () {
      this.show = !this.show
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 推荐频道不传递
      const newArr = this.userChannelList.filter((item) => item.id !== 0)
      // delete name属性添加seq属性
      const theNewArr = newArr.map((item, index) => {
        const newItem = { ...item } // 深拷贝
        delete newItem.name
        newItem.seq = index
        return newItem
      })
      await updateChanneksAPI({
        channels: theNewArr
      })
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex((item) => item.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      // 第一种方式：把现在用户发数据再覆盖发给后台，西哟啊把上面的更新过程封装成一个函数
      // 第二种方法：调用删除接口
      await removeChannelAPI(channelObj.id)
    },
    // 首页右上角放大镜
    moveSerchPageFn () {
      this.$router.push('/search')
    },
    // 滚动条滚动事件
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollObj[this.active] = document.documentElement.scrollTop
    }
  },
  computed: {
    unCheckChannelList () {
      //       // 把所有频道数组爱国对象取出，去掉用户已经选择的频道，如果找不到，则让filter订单收集到一起
      //       const newArr = this.allChannelList.filter(item => {
      //         const index = this.userChannelList.findIndex(Obj => Obj.id === item.id)
      //         // 如果找到了
      //         if (index > -1) {
      //           return false
      //         } else {
      //           return true
      //         }
      //       })
      //
      //       return newArr
      return this.allChannelList.filter((item) => this.userChannelList.findIndex((Obj) => Obj.id === item.id) === -1)
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollFn)
    // 设置滚动条的位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
  },
  // 如果使用了组件缓存使用deactivated，没有则使用destoryed
  deactivated () {
    window.removeEventListener('scroll', this.scrollFn)
  }

}
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
